<template>
	<view id="page-other">
		<!-- 搜索成功，但数据为空 -->
		<!-- <view class="" v-show="!popupShow">暂无项目</view> -->
		<!-- 搜索成功，有数据列表 -->
		<view class="card-box" v-for="item in productList" :key="item.id">
			<uni-card 
				is-full="true" 
				:title="item.name" 
				:extra="item.createdAt | moment1"
				>
				<view class="image-box">
					<image :src="item.cover" mode=""></image>
					<image :src="item.QR_code" mode=""></image>
				</view>
				<view class="info-box">
					<view class="sub-title">
						项目类型
					</view>
					<view class="" style="padding-left: 60upx;">
						<uni-tag  v-for="type in item.type" :text="type" type="primary"></uni-tag>
					</view>
					<view class="sub-title">
						应用技术
					</view>
					<view class="" style="padding-left: 60upx;">
						<uni-tag  v-for="technical in item.technical" :text="technical" type="primary"></uni-tag>
					</view>
				</view>
			</uni-card>
		</view>
		<!-- 请求失败 -->
		<uni-popup :show="popupShow" type="bottom" mode="fixed" msg="获取数据失败" @hidePopup="hidePopup"></uni-popup>
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import uniCard from "@/components/uni-card/uni-card.vue"
	import uniTag from "@/components/uni-tag/uni-tag.vue"
	import {
		createNamespacedHelpers
	} from 'vuex'
	const {
		mapState,
		mapActions,
		mapMutations
	} = createNamespacedHelpers('other')
	export default {
		components:{uniCard,uniTag,uniPopup},
		data(){
			return{
				popupShow:false
			}
		},
		computed:{
			...mapState(['productList'])
		},
		methods:{
			...mapActions(['GET_PRODUCT_LIST']),
			hidePopup(){
				this.popupShow=false
			}
		},
		onLoad() {
			this.GET_PRODUCT_LIST()
				.then((res)=>{
					if(res.length==0){}
				})
				.catch(()=>{
					this.popupShow=true
				})
		}
	}
</script>

<style lang="scss">
#page-other{
	padding:0 20upx;
	width: 100%;
	background-color: $g-bg-color-primary;
}
#page-other .card-box{
	margin: 20upx 0; 
	.uni-card{
		background-color: #f9bb1d;
	}
}
.image-box{
	display:flex;
	justify-content:space-around;
	padding: 30upx 0;
	border-bottom: 3upx solid #888888;
}
image{ 
	width: 250upx;
	height: 250upx;
}
.info-box{
	// background-color: #888888;
}
.sub-title{
	height: 50upx;
	line-height: 50upx;
	text-indent: 20upx;
	font-size: 30upx;
	color:blue;
}
.uni-tag{
	margin:10upx;
}
</style>
